<link rel="stylesheet" type="text/css" href="/public_html/css/imgareaselect-default.css" />
<script type="text/javascript" src="/public_html/js/jquery.min.js"></script>
<script type="text/javascript" src="/public_html/js/jquery.imgareaselect.pack.js"></script>
<?php echo $dir; ?>
<?php // set ratio for croping ?>
<?php if(!$w || !$h):?>
    <?php $ratio = ''; ?>
<?php else: ?>
<?php $ratio = $w.':'.$h;?>
<?php endif; ?>
<?php if(file_exists('images/gallery/' .$dir. '/' . $name)): ?>
    <?php echo image_tag('/images/gallery/' .$dir. '/' . $name);?>
<?php endif; ?>

<?php echo image_tag('/'.$path.'/' . $name
                        , array( 'id' => 'photo'));?>
<?php echo form_tag('test/crop', 'id=crop'); ?>
<?php echo input_hidden_tag('state', $state);?>
<?php echo input_hidden_tag('x1', '');?>
<?php echo input_hidden_tag('y1', '');?>
<?php echo input_hidden_tag('width', '');?>
<?php echo input_hidden_tag('height', '');?>
<?php echo submit_tag('save crop'); ?>

<?php echo link_to(__('skip'), 'test/crop?state='.($state+1));?>

<?php if(($state-1)>0): ?>
<?php echo link_to(__('back'), 'test/crop?state='.($state-1));?>
<?php endif; ?>
<?php echo link_to(__('cancel'), 'test/cancel');?>
<?php echo link_to(__('save for object'), 'test/save');?>
</form>
<script type="text/javascript">
jQuery(document).ready(function () {
    $('img#photo').imgAreaSelect({
        handles: true,
      onSelectEnd: function(img, selection)
                {
                    jQuery('#x1').val(selection.x1);
                    jQuery('#y1').val(selection.y1);
                    jQuery('#width').val(selection.width);
                    jQuery('#height').val(selection.height);
                },
    aspectRatio: "<?php echo $ratio;?>"
    });
});
</script>